<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :border="false">
      <a-col :span="6">
        <div :style="{ background: 'url(' + qrcodeParam.qrcode_bg + ') no-repeat 0/ 300px 480px' }" class="left">
          <img
            :src="qrcodeParam.avatar"
            style="background-color: #fff; border: 1px #bbb solid; z-index: 10"
            :style="{
              width: qrcodeParam.avatar_w + 'px',
              height: qrcodeParam.avatar_w + 'px',
              position: 'absolute',
              top: qrcodeParam.avatar_y + 'px',
              left: qrcodeParam.avatar_x + 'px',
              borderRadius: qrcodeParam.avatar_w + 'px',
            }"
          />
          <img v-if="qrcodeParam.qrcode_c == 1" :src="qrcodeParam.qrcode_pic" :style="style" />
          <img v-else :src="qrcodeParam.qrcode_pic" :style="style1" />
          <span
            style="width: 150px; line-height: 1"
            :style="{
              position: 'absolute',
              top: qrcodeParam.font_y + 'px',
              left: qrcodeParam.font_x + 'px',
              fontSize: qrcodeParam.font_w + 'px',
              color: qrcodeParam.font_c,
            }"
            >用户昵称</span
          >
        </div>
      </a-col>
      <a-col :span="16" :offset="1" style="margin-left: 80px">
        <a-form :wrapper-col="{ span: 12 }" :label-col="{ span: 5 }">
          <a-form-item label="背景图片">
            <storage-select
              size="small"
              v-if="image_status"
              placeholder="请选择背景图片"
              v-model="qrcodeParam.qrcode_bg"
            ></storage-select>
          </a-form-item>
          <a-form-item label="头像宽度">
            <a-input default-value="0" type="number" v-model="qrcodeParam.avatar_w" />
          </a-form-item>
          <a-form-item label="头像距左宽度">
            <a-input default-value="0" type="number" v-model="qrcodeParam.avatar_x" />
          </a-form-item>
          <a-form-item label="头像距上高度">
            <a-input default-value="0" type="number" v-model="qrcodeParam.avatar_y" />
          </a-form-item>
          <a-form-item label="二维码宽度">
            <a-input default-value="0" type="number" v-model="qrcodeParam.qrcode_w" />
          </a-form-item>
          <a-form-item label="二维码样式">
            <label>
              <input v-model="qrcodeParam.qrcode_c" type="radio" value="1" />
              <span class="label-text">圆形</span>
            </label>
            <a-divider type="vertical" />
            <label>
              <input v-model="qrcodeParam.qrcode_c" type="radio" value="0" />
              <span class="label-text">方形</span>
            </label>
          </a-form-item>
          <a-form-item label="二维码距左宽度">
            <a-input default-value="0" type="number" v-model="qrcodeParam.qrcode_x" />
          </a-form-item>
          <a-form-item label="二维码距上高度">
            <a-input default-value="0" type="number" v-model="qrcodeParam.qrcode_y" />
          </a-form-item>
          <a-form-item label="用户昵称大小">
            <a-input default-value="0" type="number" v-model="qrcodeParam.font_w" />
          </a-form-item>
          <a-form-item label="用户昵称距左宽度">
            <a-input default-value="0" type="number" v-model="qrcodeParam.font_x" />
          </a-form-item>
          <a-form-item label="用户昵称距上高度">
            <a-input default-value="0" type="number" v-model="qrcodeParam.font_y" />
          </a-form-item>
          <a-form-item label="用户昵称颜色">
            <!-- <a-space direction="vertical">
              <a-card style="width: 300px;">
                <p
                  v-for="(c, index) in colors"
                  :key="index"
                >
                  <a-button
                    :style="{ color: c.color }"
                    type="normal"
                    @click="selectFontColor(c)">
                    用户昵称
                  </a-button>
                </p>
              </a-card>
            </a-space> -->
            <a-input type="color" v-model="qrcodeParam.font_c"></a-input>
          </a-form-item>
          <a-form-item style="text-align: center">
            <a-button type="primary" @click="handleSubmit">保存</a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { qrcode, getQrcodeSetting } from '@/api/share'
export default {
  name: 'SharePoster',
  components: {},
  data() {
    return {
      image_status: false,
      colors: [],
      qrcodeParam: {
        qrcode_bg: 'http://qijian.cyyvip.com/web/statics/images/2.png',
        avatar_w: '50',
        avatar_x: '50',
        avatar_y: '50',
        qrcode_w: '200',
        qrcode_c: '1',
        qrcode_x: '50',
        qrcode_y: '250',
        font_w: '20',
        font_x: '110',
        font_y: '50',
        font_c: '#ff0000',
      },
    }
  },
  async created() {
    await this.qrcode()
  },
  methods: {
    qrcode() {
      getQrcodeSetting({is_saas:1})
        .then((res) => {
          if (res.code === 0) {
            this.colors = res.data.color
            this.qrcodeParam = res.data
            this.$nextTick(() => {
              this.image_status = true
            })
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    handleSubmit() {
      this.qrcodeParam.is_saas = 1
      qrcode(this.qrcodeParam)
        .then((res) => {
          if (res.code === 0) {
            this.$message.success('保存成功！')
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    selectFontColor(color) {
      this.qrcodeParam.font_c = color.color
    },
  },
  computed: {
    style() {
      console.log(this.qrcodeParam.qrcode_w)
      return {
        width: this.qrcodeParam.qrcode_w ? this.qrcodeParam.qrcode_w + 'px' : '120px',
        position: 'absolute',
        top: this.qrcodeParam.qrcode_y ? this.qrcodeParam.qrcode_y + 'px' : '0px',
        left: this.qrcodeParam.qrcode_x ? this.qrcodeParam.qrcode_x + 'px' : '0px',
        borderRadius: this.qrcodeParam.qrcode_w ? this.qrcodeParam.qrcode_w + 'px' : '0px',
      }
    },
    style1() {
      return {
        width: this.qrcodeParam.qrcode_w ? this.qrcodeParam.qrcode_w + 'px' : '120px',
        position: 'absolute',
        top: this.qrcodeParam.qrcode_y ? this.qrcodeParam.qrcode_y + 'px' : '0px',
        left: this.qrcodeParam.qrcode_x ? this.qrcodeParam.qrcode_x + 'px' : '0px',
      }
    },
  },
}
</script>
<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.search-item {
  margin-left: 10px;
}
.overscroll::-webkit-scrollbar {
  display: none;
}
.left {
  width: 300px;
  height: 480px;
  border: 1px dashed #666666;
}
</style>
